<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="__STATIC__/js/base.js"></script>
    <title>众创空间</title>
    <link rel="stylesheet" href="__STATIC__/css/base.css">
    <script src="__STATIC__/js/jquery-1.11.1.min.js"></script>
    <!--<script src="js/index.js"></script>-->
</head>
<body>
<section class="wrap">
    <div class="search">
        <div id="validation">
            <input type="text" class="input-box" placeholder="请输入搜索关键字" value="">
            <div class="refer" onclick="search()"></div>
        </div>
        <div class="cancel">取消</div>
    </div>
    <script>
        $(".cancel").click(function () {
            $(".input-box").val("");
        })
    </script>
    <div id="filter">
       <ul class="tab">
           <li  class="tab-item " id="location">
                   <span>位置</span>
                   <img src="__STATIC__/images/arrow_down.png"/>
           </li>
           <li  class="tab-item" id="rent">
               <span>租金</span>
               <img src="__STATIC__/images/arrow_down.png"/>
           </li>
           <li  class="tab-item" id="stamp">
               <span>类型</span>
               <img src="__STATIC__/images/arrow_down.png"/>
           </li>
       </ul>
        <div id="selected">
            <div class="sel-location">
                <ul class="sel-province">
                    {volist name="province" id="v"}
                    <li><span onclick="getCity($(this).attr('data-value'));" data-value="{$v.areaId}">{$v.areaName}</span></li>
                    {/volist}
                </ul>
                <ul  class="sel-city">
                    {volist name="city" id="v"}
                    <li><span onclick="getArea($(this).attr('data-value'));" data-value="{$v.areaId}">{$v.areaName}</span></li>
                    {/volist}
                </ul>
                <ul class="sel-area">
                    {volist name="area" id="v"}
                    <li><span data-value="{$v.areaId}">{$v.areaName}</span></li>
                    {/volist}
                </ul>
            </div>
            <div class="sel-rent">
                <ul >
                    <li><span data-value="1">1000元以下</span></li>
                    <li><span data-value="2">1000-5000元</span></li>
                    <li><span data-value="3">5000-10000元</span></li>
                    <li><span data-value="4">10000元以上</span></li>
                </ul>
            </div>
            <div class="sel-stamp">
                <ul >
                    <li ><span data-value="7">空间出租</span></li>
                    <li><span data-value="8">工位出租</span></li>
                </ul>
            </div>
        </div>
        <script>
            function search() {
                var search=$(".input-box").val();
                if(search==""){
                    var location=$(".sel-area .active").children('span').attr('data-value');
                    var rent=$(".sel-rent .active").children('span').attr('data-value');
                    var stamp=$(".sel-stamp .active").children('span').attr('data-value');
                }else {
                    var location="";
                    var rent="";
                    var stamp="";
                }
                $.post("{:\\think\\Url::build('index/Zhongchuang/search')}",{location:location,rent:rent,stamp:stamp,search:search},function(msg){
                    var html="";
                    for(var i=0;i<msg.length;i++) {
                        html += '<li >' +
                            '                   <a href="/makerSpaceDetail?projectId='+msg[i].projectId+'">' +
                            '                     <div><img src="'+msg[i].files+'" ></div>' +
                            '                     <div>' +
                            '                         <span  style="width: 132px;overflow: hidden;white-space: nowrap;\n' +
                            'text-overflow: ellipsis;">'+msg[i].projectName+'</span>' +
                            '                         <span>地址:'+msg[i].areaName+'</span>' +
                            '                     </div>' +
                            '                     <div>'+msg[i].price+'/月</div>' +
                            '                 </a>' +
                            '               </li>'
                    }
                    $(".register_tab ul").html(html)
                })

            }
            function getCity(str) {
                $.post("{:\\think\\Url::build('index/Guquan/getCity')}",{province:str},function(msg){
                    var html="";
                    var htm="";
                    for(var j=0;j<msg.length;j++) {
                        html += '<li><span onclick=getArea($(this).attr("data-value")); data-value='+msg[j].areaId+'>'+msg[j].areaName+'</span></li>'
                        for(var i=0;i<msg[j].area.length;i++) {
                            htm += '<li><span data-value='+msg[j].area[i].areaId+'>'+msg[j].area[i].areaName+'</span></li>'
                        }
                        $(".sel-area").html(htm);
                    }
                    $(".sel-city").html(html);
                })
            }
            function getArea(str) {
                $.post("{:\\think\\Url::build('index/Guquan/getArea')}",{city:str},function(msg){
                    var html="";
                    for(var j=0;j<msg.length;j++) {
                        html += '<li><span data-value='+msg[j].areaId+'>'+msg[j].areaName+'</span></li>'
                    }
                    $(".sel-area").html(html);
                })
            }


        </script>
       <div class="register_tab">
           <ul>
               {volist name="data" id="v"}
               <li >
                   <a href="/makerSpaceDetail?projectId={$v.projectId}">
                     <div><img src="{$v.files}" ></div>
                     <div>
                         <span style="width: 132px;overflow: hidden;white-space: nowrap;
text-overflow: ellipsis;">{$v.projectName}</span>
                         <span>地址:{$v.areaName}</span>
                     </div>
                     <div>{$v.price}元/月</div>
                 </a>
               </li>
               {/volist}
           </ul>
       </div>
    </div>

</section>
<script type="text/javascript">
    var page=1;
    var finished=0;
    var sover=0;

    //如果屏幕未到整屏自动加载下一页补满
    var setdefult=setInterval(function (){
        if(sover==1)
            clearInterval(setdefult);
        else if($(".register_tab ul").height()<$(window).height())
            loadmore($(window));
        else
            clearInterval(setdefult);
    },500);
    //加载完
    function loadover(){
        if(sover==1)
        {
            var overtext="Duang～到底了";
            $(".loadmore").remove();
            if($(".loadover").length>0)
            {
                $(".loadover span").eq(0).html(overtext);
            }
            else
            {
                var txt='<div class="loadover" style="text-align: center"><span >'+overtext+'</span></div>'
                $("body").append(txt);
            }
        }
    }

    //加载更多
    var vid=0;

    function loadmore(obj){
        if(finished==0 && sover==0)
        {
            var scrollTop = $(obj).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(obj).height();
            if($(".loadmore").length==0)
            {
                var txt='<div class="loadmore"  style="text-align: center"><span class="loading"></span>加载中..</div>'
                $("body").append(txt);
            }
            var search=$(".input-box").val();
            if(search==""){
                var location=$(".sel-area .active").children('span').attr('data-value');
                var rent=$(".sel-rent .active").children('span').attr('data-value');
                var stamp=$(".sel-stamp .active").children('span').attr('data-value');
            }else {
                var location="";
                var rent="";
                var stamp="";
            }
            if (scrollTop + windowHeight -scrollHeight>=0 ) {
                //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
                $.ajax({
                    type: 'GET',
                    url: '/index/Zhongchuang/append?num='+page+'&location='+location+'&rent='+rent+'&stamp='+stamp+'&search='+search,
                    dataType: 'json',
                    success: function(data){
                        console.log(data);
                        if(data=="")
                        {
                            sover = 1;
                            loadover();
                            if (page == 1) {
                                $("#no_msg").removeClass("hidden");
                                $(".loadover").remove();
                            }
                        }
                        else
                        {
                            var result = ''
                            for(var i = 0; i < data.length; i++){
                                result+='<li >' +
                                    '                   <a href="/makerSpaceDetail?projectId='+data[i].projectId+'">' +
                                    '                     <div><img src="'+data[i].files+'" ></div>' +
                                    '                     <div>' +
                                    '                         <span  style="width: 132px;overflow: hidden;white-space: nowrap;\n' +
                                    'text-overflow: ellipsis;">'+data[i].projectName+'</span>' +
                                    '                         <span>地址:'+data[i].areaName+'</span>' +
                                    '                     </div>' +
                                    '                     <div>'+data[i].price+'/月</div>' +
                                    '                 </a>' +
                                    '               </li>'
                            }

                            // 为了测试，延迟1秒加载
                            setTimeout(function(){
                                $(".loadmore").remove();
                                $('.register_tab ul').append(result);
                                page+=1;
                                finished=0;
                                //最后一页
                                if(page==10)
                                {
                                    sover=1;
                                    loadover();
                                }
                            });
                        }
                    },
                    error: function(xhr, type){
                        alert('Ajax error!');
                    }
                });
            }
        }
    }
    //页面滚动执行事件
    $(window).scroll(function (){
        loadmore($(this));
    });
</script>
</body>
<script>
 $(function(){
     $('.tab-item').on('click',function(){
         if($(this).hasClass('active')){
             $('.tab-item').removeClass('active');
             $('.tab-item').children('img').attr('src','__STATIC__/images/arrow_down.png');
             $('#selected div').removeClass('active_location');
         }else {
             $('#selected div').removeClass('active_location');
             $('.tab-item').removeClass('active');
             $('.tab-item').children('img').attr('src','__STATIC__/images/arrow_down.png');
             $(this).addClass('active');
             $(this).children('img').attr('src','__STATIC__/images/selected.png');
             var selected = $(this).attr('id');
             if(selected == 'location'){
                 $('#filter #selected .sel-location ').addClass('active_location');
             }
             if(selected == 'rent'){
                 $('#filter #selected .sel-rent ').addClass('active_location');
             }
             if(selected == 'stamp'){
                 $('#filter #selected .sel-stamp ').addClass('active_location');
             }
         }
     });
     $('#selected .sel-stamp ul li,#selected .sel-rent ul li').on('click',function(){
         $(this).parent().children('li').removeClass('active');;
         $(this).addClass('active');
         $(this).parent().parent().removeClass('active_location');
         $('.tab-item').children('img').attr('src','__STATIC__/images/arrow_down.png');
         $('.tab-item').removeClass('active');
         var className  = $(this).parent().parent().attr('class');
         if(className == 'sel-rent'){
             $('#rent span').html($(this).children('span').text());
         }
         if(className == 'sel-stamp'){
              $('#stamp span').html($(this).children('span').text());
         }
        search()
     });
     $('#selected .sel-location .sel-province,#selected .sel-location .sel-city').on('click','li',function(){
         $(this).parent().children('li').removeClass('active');;
         $(this).addClass('active');
     });
     $('#selected .sel-location .sel-area').on('click','li',function(){
         $('.tab-item').children('img').attr('src','__STATIC__/images/arrow_down.png');
         $('.tab-item').removeClass('active');
         $(this).parent().children('li').removeClass('active');;
         $(this).addClass('active');
         $(this).parent().parent().removeClass('active_location');
         $('#location span').html($(this).children('span').text());
         search()
     });
 });
</script>
</html>